<template>
<div>
  <h2>Radio 单选框</h2>
  <!-- 在一组备选项中进行单选 -->
  <!-- 基础用法 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器-->
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
  <br>
  <!-- label Radio 的 value   类型string / number / boolean  -->
  <el-radio v-model="radio2" label= 1>数字备选项</el-radio>
  <el-radio v-model="radio2" label= 2>数字备选项</el-radio>
  <el-radio v-model="radio2" label= 3>数字备选项</el-radio>
  <br>
  <!-- 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值 -->
  <el-radio v-model="radio3" label= true>布尔备选项</el-radio>
  <el-radio v-model="radio3" label= false>布尔备选项</el-radio>
  <br>
  <h2>禁用状态</h2>
  <!-- 单选框不可用的状态 -->
  <el-radio disabled v-model="radio4" label="禁用">禁用备选项</el-radio>
  <!-- disabled 是否禁用 boolean类型 默认false -->
  <el-radio disabled v-model="radio4" label="选中且禁用">禁用备选项</el-radio>
  <el-radio  v-model="radio4" label="哈哈">禁用备选项</el-radio>
  <br>
  <h2>单选框组</h2>
  <!-- 适用于在多个互斥的选项中选择的场景 -->
  <el-radio-group v-model="radio5">
    <!-- 结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value -->
    <el-radio :label="3">单选框组备选项</el-radio>
    <el-radio :label="6">单选框组备选项</el-radio>
    <el-radio :label="9">单选框组备选项</el-radio>
  </el-radio-group>
  <br>
  <h2>按钮样式</h2>
  <!-- 按钮样式的单选组合 -->
  <el-radio-group v-model="radio6">
    <!-- 用法把el-radio元素换成el-radio-button元素即可 -->
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  
  <div style="margin-top: 20px">
    <!-- size 说明，Radio 的尺寸，仅在 border 为真时有效  string类型 可选值medium / small / mini-->
    <el-radio-group v-model="radio7" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <!-- text-color 按钮形式的 Radio 激活时的文本颜色 string类型 默认颜色 #ffffff -->
    <el-radio-group v-model="radio8" size="small" text-color='pink'>
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled ></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
<!-- fill 按钮形式的 Radio 激活时的填充色和边框色 string类型 默认颜色#409EFF -->
    <el-radio-group v-model="radio9" disabled size="mini" fill="green">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <br>
  <h2>带有边框的</h2>
  <!-- 设置border属性可以渲染为有边框的单选框 -->
  <div>
    <el-radio v-model="radio11" label="1" border>备选项1</el-radio>
    <el-radio v-model="radio11" label="2" border>备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <!-- border 是否显示框 boolean类型 默认值为false -->
    <el-radio v-model="radio12" label="1" border size="medium">备选项1</el-radio>
    <!-- 出现border 相当于默认值改成true -->
    <el-radio v-model="radio12" label="2" border size="medium">备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio13" size="small">
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border disabled>备选项2</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio14" size="mini" disabled>
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border>备选项2</el-radio>
    </el-radio-group>
  </div>



 
</div>
  
</template>

<script lang="ts">
import Vue from 'vue';
export default class Radio extends Vue {
  // 默认选定
       private radio: string = '1';
       private radio2: string = '3';
       private radio3: string = 'true';
       private radio4: string = '选中且禁用';
       private radio5: string = '6';
       private radio6: string = '上海';
       private radio7: string = '北京';
       private radio8: string = '广州';
       private radio9: string = '深圳';
       private radio11: string = '1';
       private radio12: string = '1';
       private radio13: string = '1';
       private radio14: string = '1';
}
</script>

<style>

</style>